<template>
  <div>
    <el-collapse-item :title="$t('基础配置')" name="1">
      <el-form-item :label="$t('标题')">
        <el-input v-model="config.title"></el-input>
      </el-form-item>
      <el-form-item :label="$t('跳转功能')">
        <l-tree-select :options="appTree" v-model="config.moduleId">
        </l-tree-select>
      </el-form-item>
      <el-form-item :label="$t('表单选择')">
        <l-custmerform-select
          v-model="config.viewForm"
          @change="custmerformChange"
          :placeholder="$t('请选择')"
        >
        </l-custmerform-select>
      </el-form-item>
      <el-form-item :label="$t('表单版本')">
        <l-select
          v-model="config.formVerison"
          :options="formVerisons"
          :placeholder="$t('请选择')"
        >
        </l-select>
      </el-form-item>
      <el-form-item :label="$t('标题')">
        <l-select
          v-model="config.titleKey"
          :options="formComponents"
          @change="handleChangeSelect($event, 1)"
        ></l-select>
      </el-form-item>
      <el-form-item :label="$t('副标题')">
        <l-select
          v-model="config.subTitleKey"
          :options="formComponents"
          @change="handleChangeSelect($event, 2)"
        ></l-select>
      </el-form-item>
      <el-form-item :label="$t('排序字段')">
        <l-select
          v-model="config.orderId"
          :options="formComponents"
          placeholder="请选择"
        >
        </l-select>
      </el-form-item>
      <el-form-item :label="$t('行数限制')">
        <el-switch
          :active-value="1"
          :inactive-value="0"
          v-model="config.limitRow"
        >
        </el-switch>
      </el-form-item>
      <el-form-item v-if="config.limitRow == 1" :label="$t('最大行数')">
        <el-input-number
          v-model="config.maxRows"
          controls-position="right"
          :placeholder="$t('请输入')"
        ></el-input-number>
      </el-form-item>
    </el-collapse-item>
  </div>
</template>
<script>
const apiForm = window.$api.custmerForm.scheme;
export default {
  props: ["data"],
  inject: ["quickBiDesign", "appDesign"],
  components: {},
  data() {
    return {};
  },
  computed: {
    config() {
      return this.data;
    },
    appTree() {
      return this.appDesign.appTree || [];
    },
  },
  asyncComputed: {
    formVerisons: {
      async get() {
        let res = [];
        if (!this.$validatenull(this.config.viewForm)) {
          res = await this.$awaitWraper(
            apiForm.getHistoryList(this.config.viewForm)
          );
        }
        return (res || []).map((t) => {
          return { label: this.lr_dateFormat(t.f_CreateDate), value: t.f_Id };
        });
      },
    },
    formComponents: {
      async get() {
        if (this.$validatenull(this.config.formVerison)) {
          return [];
        }
        if (
          this.$validatenull(
            this.quickBiDesign.custmerformSchemes[this.config.formVerison]
          )
        ) {
          const { f_Scheme, f_Id } =
            (await this.$awaitWraper(
              apiForm.getHistory(this.config.formVerison)
            )) || {};
          this.quickBiDesign.custmerformSchemes[f_Id] = { f_Scheme };
          if (this.config.formVerison == f_Id) {
            return this.loadFormScheme(f_Scheme);
          }
        } else {
          return this.loadFormScheme(
            this.quickBiDesign.custmerformSchemes[this.config.formVerison]
              .f_Scheme
          );
        }
        return [];
      },
    },
  },
  methods: {
    custmerformChange(val) {
      if (val == null) {
        this.config.formVerison = "";
      } else {
        this.config.formVerison = val.f_SchemeId;
      }
    },
    loadFormScheme(strScheme) {
      const scheme = JSON.parse(strScheme);
      const fields = [];
      scheme.formInfo.tabList.forEach((tab) => {
        tab.components.forEach((component) => {
          if (
            ![
              "gridtable",
              "divider",
              "btn",
              "tab",
              "card",
              "collapse",
              "tab",
              "viewtable",
            ].includes(component.type) &&
            component.display &&
            component.field
          ) {
            const col = {
              value: `${component.field.toLowerCase()}${
                scheme.formType == 1
                  ? ""
                  : scheme.db.findIndex((t) => t.name == component.table)
              }`,
              label: component.label,
            };

            const dataTypeRes = this.getComponentDataType(component);
            col.dataType = dataTypeRes.dataType;
            col.dataCode = dataTypeRes.code;
            col.valueKey = dataTypeRes.valueKey;
            col.labelKey = dataTypeRes.labelKey;
            col.options = dataTypeRes.options;
            col.format = dataTypeRes.format;
            if (["rate", "switch"].includes(component.type)) {
              col.setting = component;
            }
            fields.push(col);
          }
        });
      });
      return fields;
    },

    handleChangeSelect(event, type) {
      if (type == 1) {
        this.titleOpt = event;
      } else {
        this.subTitleOpt = event;
      }
    },

    // 表格
    // 获取组件数据类型
    getComponentDataType(compt) {
      const res = {};
      if (
        [
          "radio",
          "checkbox",
          "select",
          "selectMultiple",
          "treeselect",
          "layerselect",
        ].includes(compt.type)
      ) {
        switch (compt.dataType) {
          case "1":
            res.dataType = "mydata";
            res.options = compt.options;
            break;
          case "2":
            res.dataType = "dataItem";
            res.code = compt.dataCode;
            break;
          case "3":
            res.dataType = "dataSource";
            res.code = compt.dataCode;
            res.valueKey = compt.dataValueKey;
            res.labelKey = compt.dataLabelKey;
            break;
        }
      } else if (
        ["datetime", "createtime", "modifytime"].includes(compt.type)
      ) {
        res.dataType = "datetime";
        res.format = compt.format || "yyyy-MM-dd HH:mm:ss";
      } else if (["upload"].includes(compt.type)) {
        res.dataType = "file";
      } else if (["uploadimg"].includes(compt.type)) {
        res.dataType = "img";
      } else if (["companySelect", "company"].includes(compt.type)) {
        res.dataType = "company";
      } else if (["departmentSelect", "department"].includes(compt.type)) {
        res.dataType = "department";
      } else if (
        ["userSelect", "createuser", "modifyuser"].includes(compt.type)
      ) {
        res.dataType = "user";
      } else if (["areaselect"].includes(compt.type)) {
        res.dataType = "areas";
      } else {
        res.dataType = compt.type;
      }
      return res;
    },
  },
};
</script>

